<template>
  <div class="cascader">
    <el-cascader 
    v-model="value"
    :options="options"
    clearable 
    :props="{expandTrigger : 'hover'}"
    :show-all-levels="false"><!-- 
      :props="{expandTrigger : 'hover'}"使菜单浮动
      :show-all-levels="false" 只显示最后一级
       -->

    </el-cascader>
  </div>
</template>

<script>
  export default {
    name: "Cascader",
    data() {
      return {
        value: '',
        options:[
          {
            value: 1,
            label: "城市",
            children: [
              {
                value: 11,
                label: '北京',
                children:[
                  {
                    value:111,
                    label:'朝阳区'
                  },
                  {
                    value:112,
                    label:'海淀区'
                  },
                ]
              },
              {
                value: 12,
                label: '上海'
              },
              {
                value: 13,
                label: '广州'
              },
              {
                value: 14,
                label: '深圳',
                children: [
                  {
                    value:141,
                    label:"福田区"
                  },
                  {
                    value:142,
                    label:"宝安区"
                  },
                  {
                    value:143,
                    label:"罗湖区"
                  },
                  {
                    value:144,
                    label:"福民区"
                  },
                ]
              },
            ]
          }
        ]
      }
    },
  }
</script>

<style scope>

</style>